$(function() {
	$("#jqGridVar1").jqGrid({
		datatype : 'local',
		colModel : [ {
			label : 'id',
			name : 'id',
			index : 'id',
			width : 50,
			key : true,
			hidden : true
		}, {
			label : '名称',
			name : 'name',
			index : 'name',
			width : 80
		}, {
			label : '内容',
			name : 'context',
			index : 'context',
			width : 120
		}, {
			label : '所属IOServerid',
			name : 'ioserverid',
			index : 'ioserverid',
			width : 120
		}, {
			label : '所属设备id',
			name : 'equipmentid',
			index : 'equipmentid',
			width : 120
		}, {
			label : '采集状态(是否采集)',
			name : 'variableStatus',
			index : 'variable_status',
			width : 120
		}, {
			label : '说明',
			name : 'remark',
			index : 'remark',
			width : 80,
			hidden : true
		}, {
			label : '是否启用（0 未启用 1 已启用）',
			name : 'enable',
			index : 'enable',
			width : 80,
			hidden : true
		} ],
		viewrecords : true,
		height : 385,
		rowNum : 10,
		rowList : [ 10, 30, 50 ],
		rownumbers : true,
		rownumWidth : 25,
		autowidth : true,
		multiselect : true,
		pager : "#jqGridPagerVar1",
		jsonReader : {
			root : "page.list",
			page : "page.currPage",
			total : "page.totalPage",
			records : "page.totalCount"
		},
		prmNames : {
			page : "page",
			rows : "limit",
			order : "order"
		},
		gridComplete : function() {
			// 隐藏grid底部滚动条
			$("#jqGridVar1").closest(".ui-jqgrid-bdiv").css({
				"overflow-x" : "hidden"
			});
		}
	});
});

$(function() {
	$("#jqGridVar2").jqGrid({
		datatype : 'local',
		colModel : [ {
			label : 'id',
			name : 'id',
			index : 'id',
			width : 50,
			key : true,
			hidden : true
		}, {
			label : '名称',
			name : 'name',
			index : 'name',
			width : 80
		}, {
			label : '内容',
			name : 'context',
			index : 'context',
			width : 120
		}, {
			label : '所属IOServerid',
			name : 'ioserverid',
			index : 'ioserverid',
			width : 120
		}, {
			label : '所属数据包id',
			name : 'wrapid',
			index : 'wrapid',
			width : 120
		}, {
			label : '采集状态(是否采集)',
			name : 'variableStatus',
			index : 'variable_status',
			width : 120
		}, {
			label : '说明',
			name : 'remark',
			index : 'remark',
			width : 80,
			hidden : true
		}, {
			label : '是否启用（0 未启用 1 已启用）',
			name : 'enable',
			index : 'enable',
			width : 80,
			hidden : true
		} ],
		viewrecords : true,
		height : 385,
		rowNum : 10,
		rowList : [ 10, 30, 50 ],
		rownumbers : true,
		rownumWidth : 25,
		autowidth : true,
		multiselect : true,
		pager : "#jqGridPagerVar2",
		jsonReader : {
			root : "page.list",
			page : "page.currPage",
			total : "page.totalPage",
			records : "page.totalCount"
		},
		prmNames : {
			page : "page",
			rows : "limit",
			order : "order"
		},
		gridComplete : function() {
			// 隐藏grid底部滚动条
			$("#jqGridVar2").closest(".ui-jqgrid-bdiv").css({
				"overflow-x" : "hidden"
			});
		}
	});
});

var vm = new Vue({
	el : '#rrapp',
	data : {
		showList : true,
		title : null,
		BusinessType : DataUtils.BusinessType,

		iotsGroup : {},// 分组信息
		showGroup : false,

		IOServer : {},// IOServer信息
		showIOServer : false,

		iotsEquipmentInfo : {},// 设备信息
		iotsEqmVar : {},// 设备下的变量信息
		showEquipment : false,

		iotsVariable : {},// 变量信息
		showVariable : false,

		iotsWrapInfo : {},// 数据包信息
		iotsWrapVar : {},// 数据包下的变量信息
		showWrapInfo : false,
		
		showTabTree1 : false,
		showTabTree2 : false,

		iotsBusinessTreeRelation : {}
	},
	methods : {
		test : function() {
			console.log(zGroupIOSTree.getSelectedNodes()[0].businessType);
		},
		//展示tab1 - 设备
		showTabTreeBtn1 : function() {
			vm.showTabTree1 = true;
			vm.showTabTree2 = false;
		},
		//展示tab2 - 数据包
		showTabTreeBtn2 : function() {
			vm.showTabTree1 = false;
			vm.showTabTree2 = true;
		}
	}
});

/**
 * zTree
 * 
 */
var setting1 = {
	data : {// 表示tree的数据格式
		simpleData : {
			enable : true,// 表示使用简单数据模式
			idKey : "id",// 设置之后id为在简单数据模式中的父子节点关联的桥梁
			pIdKey : "parentId",// 设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
			rootId : "0"// pid为null的表示根节点
		},
		key : {
			name : "remark"
		}
	},
	callback : {
		// 绑定点击事件
		onClick : ZTreeOnClick1
	},
	view : {
		addDiyDom : addDiyDom,
		selectedMulti : false
	}
};

var setting2 = {
	data : {// 表示tree的数据格式
		simpleData : {
			enable : true,// 表示使用简单数据模式
			idKey : "id",// 设置之后id为在简单数据模式中的父子节点关联的桥梁
			pIdKey : "parentId",// 设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
			rootId : "0"// pid为null的表示根节点
		},
		key : {
			name : "remark"
		}
	},
	callback : {
		// 绑定点击事件
		onClick : ZTreeOnClick2
	},
	view : {
		addDiyDom : addDiyDom,
		selectedMulti : false
	}
};

var setting3 = {
	data : {// 表示tree的数据格式
		simpleData : {
			enable : true,// 表示使用简单数据模式
			idKey : "id",// 设置之后id为在简单数据模式中的父子节点关联的桥梁
			pIdKey : "parentId",// 设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
			rootId : "0"// pid为null的表示根节点
		},
		key : {
			name : "remark"
		}
	},
	callback : {
		// 绑定点击事件
		onClick : ZTreeOnClick3
	},
	view : {
		addDiyDom : addDiyDom,
		selectedMulti : false
	}
};

// 添加自定义按钮
function addDiyDom(treeId, treeNode) {
	var aObj = $("#" + treeNode.tId + "_a");

	// 只有 group
	if (!(treeNode.businessType == 1)) {
		return 
	}

	var editStr = "<span id='diyBtn_space_" + treeNode.id + "' > </span>"
			+ "<button type='button' class='' id='diyBtn_" + treeNode.id
			+ "' title='btn' value='btn' onfocus='this.blur();'>+</button>";
	aObj.append(editStr);
	// var btn = $("#diyBtn_"+treeNode.id);
	// if (btn) btn.bind("click", function(){alert("diy Button for " +
	// treeNode.name);});
};

function ZTreeOnClick1(event, treeId, treeNode) {
	var node = zGroupIOSTree.getSelectedNodes()[0];// 选中的节点
	var code = node.businessType;// 节点的类型
	var url = "";
	if (code == "1") { // 分组
		url = "iots/iotsgroup/info/" + node.businessId;
		$.get(baseURL + url, function(r) {
			vm.iotsGroup = r.iotsGroup;
		});
		vm.showGroup = true;
		vm.showIOServer = false;
		vm.showEquipment = false;
		vm.showVariable = false;
		vm.showWrapInfo = false;
	} else if (code == "2") { // IOServer
		url = "iots/iotsioserverinfo/info/" + node.businessId;
		$.get(baseURL + url, function(r) {
			vm.IOServer = r.iotsIoserverInfo;
		});
		vm.showGroup = false;
		vm.showIOServer = true;
		vm.showEquipment = false;
		vm.showVariable = false;
		vm.showWrapInfo = false;
	}
}

function ZTreeOnClick2(event, treeId, treeNode) {
	var node = zIOSEquipmentTree.getSelectedNodes()[0];// 选中的节点
	var code = node.businessType;// 节点的类型
	var url = "";
	if (code == "2") { // IOServer
		url = "iots/iotsioserverinfo/info/" + node.businessId;
		$.get(baseURL + url, function(r) {
			vm.IOServer = r.iotsIoserverInfo;
		});
		vm.showGroup = false;
		vm.showIOServer = true;
		vm.showEquipment = false;
		vm.showVariable = false;
		vm.showWrapInfo = false;
	} else if (code == "3") { // equipment
		// 虽然是 设备，实际查询的是 设备下的变量
		url = "iots/iotsvariableinfo/selectEqmVar/" + node.businessId;
		$.get(baseURL + url, function(r) {
			vm.iotsEquipmentInfo = r.iotsEquipmentInfo;
			vm.iotsEqmVar = r.iotsEqmVar;
			$("#jqGridVar1").clearGridData(true).jqGrid('setGridParam', {
				data : vm.iotsEqmVar
			}).trigger("reloadGrid");
		});
		vm.showGroup = false;
		vm.showIOServer = false;
		vm.showEquipment = true;
		vm.showVariable = false;
		vm.showWrapInfo = false;
	}
}

function ZTreeOnClick3(event, treeId, treeNode) {
	var node = zIOSWrapTree.getSelectedNodes()[0];// 选中的节点
	var code = node.businessType;// 节点的类型
	var url = "";
	if (code == "2") { // IOServer
		url = "iots/iotsioserverinfo/info/" + node.businessId;
		$.get(baseURL + url, function(r) {
			vm.IOServer = r.iotsIoserverInfo;
		});
		vm.showGroup = false;
		vm.showIOServer = true;
		vm.showEquipment = false;
		vm.showVariable = false;
		vm.showWrapInfo = false;
	} else if (code == "5") { // 数据包wrap
		// 虽然是 数据包，实际查询的是 数据包下的变量
		url = "iots/iotsvariableinfo/selectWrapVar/" + node.businessId;
		$.get(baseURL + url, function(r) {
			vm.iotsWrapInfo = r.iotsWrapInfo;
			vm.iotsWrapVar = r.iotsWrapVar;
			$("#jqGridVar2").clearGridData(true).jqGrid('setGridParam', {
				data : vm.iotsWrapVar
			}).trigger("reloadGrid");
		});
		vm.showGroup = false;
		vm.showIOServer = false;
		vm.showEquipment = false;
		vm.showVariable = false;
		vm.showWrapInfo = true;
	}
}

/**
 * 构建ztree
 */
var zGroupIOSTree;
$.get(baseURL + "iots/iotsbusinesstreerelation/listGroupIOS", function(nodes) {
	$.fn.zTree.init($("#zGroupIOSTree"), setting1, nodes);
	zGroupIOSTree = $.fn.zTree.getZTreeObj("zGroupIOSTree");
});
var zIOSEquipmentTree;
$.get(baseURL + "iots/iotsbusinesstreerelation/listIOSEquipment", function(
		nodes) {
	$.fn.zTree.init($("#zIOSEquipmentTree"), setting2, nodes);
	zIOSEquipmentTree = $.fn.zTree.getZTreeObj("zIOSEquipmentTree");
});
var zIOSWrapTree;
$.get(baseURL + "iots/iotsbusinesstreerelation/listIOSWrap", function(
		nodes) {
	$.fn.zTree.init($("#zIOSWrapTree"), setting3, nodes);
	zIOSWrapTree = $.fn.zTree.getZTreeObj("zIOSWrapTree");
});
